<template>
  <a-form :model="formState" name="horizontal_login" layout="inline" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
      <a-input v-model:value="formState.username">
        <template #prefix>
          <UserOutlined class="site-form-item-icon" />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
      <a-input-password v-model:value="formState.password">
        <template #prefix>
          <LockOutlined class="site-form-item-icon" />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item>
      <a-button type="primary" html-type="submit">查询</a-button>
      <a-button>重置</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
interface FormState {
  username: string
  password: string
}

const formState = reactive<FormState>({
  username: "",
  password: "",
})
const onFinish = (values: any) => {
  console.log("Success:", values)
}

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo)
}
const disabled = computed(() => {
  return !(formState.username && formState.password)
})
</script>
